<template>
  <div class="employees-container">
    <!-- 卡片区域 -->
    <el-card>
      <page-tools>
        <templeate name="left">
          <span>总记录数:20条记录数</span>
        </templeate>
        <template #right>
          <el-button
            type="warning"
            size="mini"
            @click.native="$router.push('/import')"
          >导入excel</el-button>
          <el-button
            type="danger"
            size="mini"
            @click.native="hExportExcel"
          >导出excel</el-button>
          <el-button
            type="primary"
            size="mini"
            @click.native="dialogVisible = true"
          >新增员工</el-button>
        </template>
      </page-tools>
    </el-card>
    <el-card>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :default-sort="{ prop: 'workNumber' }"
      >
        <el-table-column
          fixed
          prop="date"
          label="序号"
          width="150"
          type="index"
          :index="indexFn"
        />
        <el-table-column prop="username" label="姓名" width="120" />
        <el-table-column prop="username" label="图像" width="120">
          <template slot-scope="scope">
            <!-- <img :src="scope.row.staffPhoto" alt=""> -->
            <ImageHolder :src="scope.row.staffPhoto" />
          </template>
        </el-table-column>
        <el-table-column prop="workNumber" label="工号" width="120" sortable />
        <el-table-column prop="formOfEmployment" label="聘用形式" width="120">
          <template slot-scope="scope">{{
            format(scope.row.formOfEmployment)
          }}</template>
        </el-table-column>
        <el-table-column prop="departmentName" label="部门" width="300" />
        <el-table-column
          prop="correctionTime"
          label="入职时间"
          width="120"
          sortable
          column-key="date"
        />
        <el-table-column fixed="right" label="操作" width="160">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="handleClick(scope.row)"
            >查看</el-button>
            <el-button type="text" size="mini">分配角色</el-button>
            <el-button
              type="text"
              size="mini"
              @click.native="delEmp(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          :current-page="query.page"
          :page-sizes="[1, 2, 3, 5]"
          :page-size="query.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
      <el-dialog
        title="添加员工"
        :visible.sync="dialogVisible"
        width="100%"
        @close="closeFn"
      >
        <emDialog ref="diaForm" @closeDia="closeDiaFn" @success="successFn" />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
// import pageTools from '@/components/pageTools/pageTools.vue'
import { getMes, delEmployees } from '@/api/employees'
import EmployeeEnum from '@/constant/employees'
import emDialog from '@/views/employees/emDialog'
export default {
  name: 'Employees',
  components: {
    emDialog
  },
  // components: { pageTools }
  data() {
    return {
      tableData: [],
      query: {
        // 每页显示几条数据
        size: 1,
        // 默认显示第几页
        page: 1
      },
      // 总条数
      total: 0,
      // 弹层显示状态
      dialogVisible: false
    }
  },
  computed: {
    // 最后一页
    maxPage() {
      return Math.ceil(this.total / this.query.size)
    },
    // 最后一页是否是满的
    isLastPageFulled() {
      return this.total % this.query.size === 0
    },
    // 索引和id效果一样
    indexFn() {
      // 当前页码减 乘以 当前页码显示条数 所得加1
      return (this.query.page - 1) * this.query.size + 1
    }
  },
  created() {
    this.loadMes()
  },
  methods: {
    async handleClick(row) {
      // 跳转到对应的页面 id
      this.$router.push(`/details/${row.id}`)
    },
    // 获取员工信息
    async loadMes() {
      // 获取员工信息接口的调用
      const res = await getMes(this.query)
      // 表格数据
      this.tableData = res.data.rows
      // 总条数
      this.total = res.data.total
    },
    // 删除员工
    delEmp(id) {
      // 用户确认删除与否
      this.$confirm('此操作将永久删除员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          // 发送请求实现删除
          const res = await delEmployees(id)
          console.log(res)
          // 删除的是某一页最后一条数据
          if (this.tableData.length === 1) {
            // 当前页码每次减1
            this.query.page--
            // 如果页码值1小于1
            if (this.query.page < 1) {
              // 页码值直接强制改为1
              this.query.page = 1
            }
          }
          // 删除提示
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 更新加载
          this.loadMes()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 转换格式
    format(type) {
      const hireType1 = EmployeeEnum.hireType.reduce((acc, cur) => {
        return { ...acc, [cur.id]: cur.value }
        // console.log(acc)
      }, {})
      return hireType1[type]
    },
    // 每页显示条数改变时触发
    handleSizeChange(val) {
      // 拿到最新的页码值
      this.query.size = val
      // 重新加载
      this.loadMes()
    },
    // 页码改变使触发
    handleCurrentChange(val) {
      // 拿到最新的每页显示条数
      this.query.page = val
      // 重新加载
      this.loadMes()
    },
    // 弹框关闭事件
    closeFn() {
      // 清空表单数据
      this.$refs.diaForm.ruleForm = {
        // 姓名
        username: '',
        // 手机号
        mobile: '',
        // 工号
        workNumber: '',
        // 部门名字
        departmentName: '',
        // 聘用形式
        formOfEmployment: 0,
        // 入职时间
        timeOfEntry: '',
        // 转正时间
        correctionTime: ''
      }
      // 关闭弹出框
      this.dialogVisible = false
    },
    // 用户点击取消的事件
    closeDiaFn() {
      this.closeFn()
    },
    // 添加成功
    successFn() {
      this.closeFn()
      // 如果最后一页是满的
      if (this.isLastPageFulled) {
        // 当前最后一页往后走一页
        this.query.page = this.maxPage + 1
        // 让页码显示正确
        this.total++
        // 最后一页没满
      } else {
        // 直接求取最后一页数据
        this.query.page = this.maxPage
      }
      // 更新页面
      this.loadMes()
    },
    // 格式转换
    formatData(rows) {
      const map = {
        id: '编号',
        password: '密码',
        mobile: '手机号',
        username: '姓名',
        timeOfEntry: '入职日期',
        formOfEmployment: '聘用形式',
        correctionTime: '转正日期',
        workNumber: '工号',
        departmentName: '部门',
        staffPhoto: '头像地址'
      }
      // header = ['id', 'mobile', 'username', .....]
      // data = [
      //     ['65c2', '1380000002', '管理员', ....],
      //     ['65c3', '1380000003', '孙财', ....],
      // ]
      // 取出英文的key组成一个新数组
      const enkeys = Object.keys(rows[0])
      console.log(enkeys)
      // 把英文的key转为中文的表头header
      const header = enkeys.map(enkey => map[enkey])
      console.log(header)
      // data的转换
      const data = rows.map(obj => { return Object.values(obj) })
      console.log(data)
      return {
        header,
        data
      }
    },
    // 导出excel
    async hExportExcel() {
      // 1.求数据
      const res = await getMes(this.query)
      // console.log(res)
      // 2.做格式转换
      const { header, data } = this.formatData(res.data.rows)
      console.log(header, data)
      // 3.把转换后的数据用excel保存起来
      import('@/vender/Export2Excel').then((excel) => {
        // excel表示导入的模块对象
        console.log(excel)
        excel.export_json_to_excel({
          header, // 表头 必填
          data, // 具体数据 必填
          filename: 'aaa', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    }
  }
}
</script>

<style>
</style>
